@import "@/lib/reset.scss";

.header {
  font-family: PingFang SC;
  @include rect(100%, auto);
  /deep/.van-nav-bar__arrow {
    font-size: 0.2rem;
    color: #000;
  }
  /deep/.van-nav-bar__text {
    color: #1C1C1C;
  }
  /deep/.van-nav-bar__left {
    padding-left: 0.05rem;
  }
  /deep/.van-nav-bar__right {
    margin-right: 0.05rem;
    padding: 0;
    @include rect(0.63rem, 0.26rem);
    line-height: 0.26rem;
    background: #FDD949;
    border-radius: 0.13rem;
    color: #1C1C1C;
    font-weight: 500;
    @include font-size(0.13rem);
    letter-spacing: 0.005rem;
    justify-content: center;
    margin-top: 0.1rem;
  }
}
.content {
  @include flexbox();
  @include flex-direction(column);
  @include justify-content();
  padding-bottom: 0.5rem;
  .my-swipe .van-swipe-item {
    height: 5rem;
    
    .my-swipe-img {
      width: 100%;
      height: 100%;
    }
  }

  .addpreview {
    @include rect(100%, 0.5rem);
    @include flexbox();
    @include justify-content();
    @include align-items();
    border-top: 1px solid #E5E5E5;
    position: absolute;
    bottom: 0;
    left: 0;

    i {
      display: inline-block;
      @include rect(0.15rem, 0.15rem);
      margin-right: 0.065rem;
      background: url('./../../assets/img/tianjiabiaoqian.png') no-repeat center center/ cover;
    }

    >span {
      @include font-size(0.15rem);
      @include color(#1C1C1C);
      font-weight: 500;
    }
  }
}

.mask {
  position: fixed;
  top: 0;
  left: 0;
  @include rect(100%, 100%);
  background-color: rgba(0, 0, 0, .5);
  z-index: 999;
  @include flexbox();
  justify-content: center;
  align-items: center;
  transition: all .5s;

  .tb-item {
    @include flexbox();
    @include flex-direction(column);
    justify-content: center;
    align-items: center;
    + .tb-item {
      margin-left: 0.5rem;
    }
    
    i {
      @include rect(0.62rem, 0.62rem);
      &.pinpai {
        background: url(('./../../assets/img/pinpai.png')) no-repeat center center/0.62rem 0.62rem;
      }
      &.didian {
        background: url(('./../../assets/img/didian.png')) no-repeat center center/0.62rem 0.62rem;
      }
      &.zidingyi {
        background: url(('./../../assets/img/zidingyi.png')) no-repeat center center/0.62rem 0.62rem;
      }
    }
    span {
      color: #fff;
      @include font-size(0.13rem);
      margin-top: 0.05rem;
    }
  }
}

.tag-itm {
  position: absolute;
  @include flexbox();
  @include align-items();
  
  .yuan {
    display: inline-block;
    @include rect(0.09rem, 0.09rem);
    border-radius: 50%;
    background-color: #fff;
    border: 0.02rem solid rgba(26, 26, 28, .6);
  }
  .line {
    display: inline-block;
    @include rect(0.1rem, 1px);
    background-color: #fff;
  }
  >b {
    padding: 0 0.08rem 0 0.25rem;
    border-radius: 0.135rem;
    border: 1px solid #fff;
    height: 0.265rem;
    line-height: 0.265rem;
    font-weight: 500;
    @include font-size(0.14rem);
    @include color(#fff);
    &.pinpai-bg {
      background: rgba(28, 28, 28, .3) url(('./../../assets/img/pinpaibg.png')) no-repeat left center/0.215rem 0.215rem;
    }
    &.didian-bg {
      background: rgba(28, 28, 28, .3) url(('./../../assets/img/didianbg.png')) no-repeat left center/0.215rem 0.215rem;
    }
    &.zidingyi-bg {
      background: rgba(28, 28, 28, .3) url(('./../../assets/img/zidingyibg.png')) no-repeat left center/0.215rem 0.215rem;
    }
  }
}
.brand-tag {
  left: 1.97rem;
  top: 0.9rem;
}
.site-tag {
  left: 1.65rem;
  top: 1.8rem;
}
.diy-tag {
  left: 2rem;
  top: 2.6rem;
}
